<template>
	<view class="home">
		<swiper class="swiperList" indicator-dots circular autoplay>
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
					<image :src="item.image_src" mode="widthFix" />
				</navigator>
			</swiper-item>
		</swiper>
		<view class="cateList">
			<view class="cateItem" v-for="(item, i) in cateList" :key="i" @click="navHandler(item)">
				<image :src="item.image_src" mode="widthFix" />
			</view>
		</view>
		<view class="floorList">
			<view class="floorItem" v-for="(item, i) in floorList" :key="i">
				<image class="floor_title" :src="item.floor_title.image_src" mode="widthFix"/>
				<view class="floorCateList">
					<navigator :url="item.product_list[0].url" class="floorLeftItem">
						<image :src="item.product_list[0].image_src"  />
					</navigator>
					<view class="floorRightItem">
						<navigator :url="item1.url" class="floorRightItemWrap" v-for="(item1, i1) in item.product_list" :key="i1" v-if="i1 !== 0">
							<image :src="item1.image_src" />
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		$http
	} from '@escook/request-miniprogram';
	export default {
		data() {
			return {
				// 轮播图数据
				swiperList: [],
				// 分类数据
				cateList: [],
				// 楼层数据
				floorList: []
			}
		},
		onLoad: function() {
			this.getSwiperList();
			this.getCateList();
			this.getFloorList();
		},
		methods: {
			// 获取轮播图数据
			getSwiperList: async function() {
				const {
					data: res
				} = await $http.get('/home/swiperdata').catch(err => err);
				if (!res || res.meta.status !== 200) {
					return uni.$baseShowMsg();
				}
				this.swiperList = res.message;
			},
			// 获取分类数据
			getCateList: async function() {
				const {
					data: res
				} = await $http.get('/home/catitems').catch(err => err);
				if (!res || res.meta.status !== 200) {
					return uni.$baseShowMsg();
				}
				this.cateList = res.message;
			},
			// 获取楼层数据
			getFloorList: async function() {
				const {
					data: res
				} = await $http.get('/home/floordata');
				if (!res || res.meta.status !== 200) {
					return uni.$baseShowMsg();
				}
				this.floorList = res.message;
				this.floorList.forEach((item) => {
					item.product_list.forEach((item1) => {
						item1.url = '/subpkg/goods_list/goods_list?' + item1.navigator_url.split('?')[1];
					})
				});
			},
			// 点击分类的回调函数
			navHandler: function(item) {
				if (item.name === '分类') {
					uni.switchTab({
						url: "/pages/cate/cate"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiperList image {
		width: 100%;
	}

	.cateList {
		display: flex;
		padding: 20rpx 0;
	}

	.cateItem {
		flex: 1;
		display: flex;
		justify-content: center;
		image {
			width: 70%;
		}
	}
	.floor_title {
		padding: 20rpx;
	}
	.floorCateList {
		display: flex;
		flex-direction: row;
		padding: 0 0 0 10rpx;
		image {
			display: block;
		}
	}
	.floorLeftItem {
		width: 232rpx;
		height: 396rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.floorRightItemWrap {
		margin-bottom: 10rpx;
	}
	.floorRightItem {
		flex: 1;
		justify-content: space-around;
		display: flex;
		flex-wrap: wrap;
		image { 
			width: 240rpx;
			height: 193rpx;
		}
	}
</style>
